{% extends "layout.html" %}
{% from "_form_macros.html" import render_errors %}

{% block content %}

<div class="add-recipe">
  <div class="page-header">
    <h2>Add a New Recipe</h2>
  </div>

<div class="container">
  <form action="{{ url_for('recipes.add_recipe') }}" method="post" enctype="multipart/form-data">
    {{ form.csrf_token }}
    <div class="form-group row">
      <legend for="recipe_title" class="col-form-legend col-sm-3">Title</legend>
      <div class="col-sm-6">
        <input type="text" class="form-control" id="recipe_title" name="recipe_title" placeholder="Enter recipe title...">
        {{ render_errors(form.recipe_title) }}
      </div>
    </div>

    <div class="form-group row">
      <legend for="recipe_description" class="col-form-legend col-sm-3">Description</legend>
      <div class="col-sm-6">
        <input type="text" class="form-control" id="recipe_description" name="recipe_description" placeholder="Enter recipe description...">
        {{ render_errors(form.recipe_description) }}
      </div>
    </div>

    <fieldset class="form-group row">
      <legend for="recipe_type" class="col-form-legend col-sm-3">Recipe Type</legend>
      <div class="col-sm-6">
          <div class="form-check">
            <label class="form-check-label">
              <input type="radio" class="form-check-input" name="recipe_type" id="recipe_type-0" value="Breakfast">
              Breakfast
            </label>
          </div>
          <div class="form-check">
            <label class="form-check-label">
              <input type="radio" class="form-check-input" name="recipe_type" id="recipe_type-1" value="Lunch">
              Lunch
            </label>
          </div>
          <div class="form-check">
            <label class="form-check-label">
              <input type="radio" class="form-check-input" name="recipe_type" id="recipe_type-2" value="Dinner" checked>
              Dinner
            </label>
          </div>
          <div class="form-check">
            <label class="form-check-label">
              <input type="radio" class="form-check-input" name="recipe_type" id="recipe_type-3" value="Dessert">
              Dessert
            </label>
          </div>
          <div class="form-check">
            <label class="form-check-label">
              <input type="radio" class="form-check-input" name="recipe_type" id="recipe_type-4" value="Side Dish">
              Side Dish
            </label>
          </div>
          <div class="form-check">
            <label class="form-check-label">
              <input type="radio" class="form-check-input" name="recipe_type" id="recipe_type-5" value="Drink">
              Drink
            </label>
          </div>
          {{ render_errors(form.recipe_type) }}
      </div>
    </fieldset>

    <fieldset class="form-group row">
      <legend for="recipe_rating" class="col-form-legend col-sm-3">Rating</legend>
      <div class="col-sm-6">
          <div class="form-check">
            <label class="form-check-label">
              <input type="radio" class="form-check-input" name="recipe_rating" id="recipe_rating-0" value="1">
              1 (Worst)
            </label>
          </div>
          <div class="form-check">
            <label class="form-check-label">
              <input type="radio" class="form-check-input" name="recipe_rating" id="recipe_rating-1" value="2">
              2
            </label>
          </div>
          <div class="form-check">
            <label class="form-check-label">
              <input type="radio" class="form-check-input" name="recipe_rating" id="recipe_rating-2" value="3">
              3
            </label>
          </div>
          <div class="form-check">
            <label class="form-check-label">
              <input type="radio" class="form-check-input" name="recipe_rating" id="recipe_rating-3" value="4">
              4
            </label>
          </div>
          <div class="form-check">
            <label class="form-check-label">
              <input type="radio" class="form-check-input" name="recipe_rating" id="recipe_rating-4" value="5" checked>
              5
            </label>
          </div>
          <div class="form-check">
            <label class="form-check-label">
              <input type="radio" class="form-check-input" name="recipe_rating" id="recipe_rating-5" value="6">
              6
            </label>
          </div>
          <div class="form-check">
            <label class="form-check-label">
              <input type="radio" class="form-check-input" name="recipe_rating" id="recipe_rating-6" value="7">
              7
            </label>
          </div>
          <div class="form-check">
            <label class="form-check-label">
              <input type="radio" class="form-check-input" name="recipe_rating" id="recipe_rating-7" value="8">
              8
            </label>
          </div>
          <div class="form-check">
            <label class="form-check-label">
              <input type="radio" class="form-check-input" name="recipe_rating" id="recipe_rating-8" value="9">
              9
            </label>
          </div>
          <div class="form-check">
            <label class="form-check-label">
              <input type="radio" class="form-check-input" name="recipe_rating" id="recipe_rating-9" value="10">
              10 (Best)
            </label>
          </div>
          {{ render_errors(form.recipe_rating) }}
      </div>
    </fieldset>

    <div class="form-group row">
      <legend for="recipe_public" class="col-form-legend col-sm-3">Public Recipe?</legend>
      <div class="col-sm-6">
        <div class="form-check">
          <label class="form-check-label">
            <input class="form-check-input" name="recipe_public" id="recipe_public" type="checkbox">
            Yes
          </label>
          {{ render_errors(form.recipe_public) }}
        </div>
      </div>
    </div>

    <div class="form-group row">
      <legend for="recipe_dairy_free" class="col-form-legend col-sm-3">Dairy-Free Recipe?</legend>
      <div class="col-sm-6">
        <div class="form-check">
          <label class="form-check-label">
            <input class="form-check-input" name="recipe_dairy_free" id="recipe_dairy_free" type="checkbox">
            Yes
          </label>
          {{ render_errors(form.recipe_dairy_free) }}
        </div>
      </div>
    </div>

    <div class="form-group row">
      <legend for="recipe_soy_free" class="col-form-legend col-sm-3">Soy-Free Recipe?</legend>
      <div class="col-sm-6">
        <div class="form-check">
          <label class="form-check-label">
            <input class="form-check-input" name="recipe_soy_free" id="recipe_soy_free" type="checkbox">
            Yes
          </label>
          {{ render_errors(form.recipe_soy_free) }}
        </div>
      </div>
    </div>

    <div class="form-group row">
      <legend for="recipe_image" class="col-form-legend col-sm-3">Recipe Image</legend>
      <div class="col-sm-6">
        <input type="file" class="form-control-file" name="recipe_image" id="recipe_image" aria-describedby="fileHelp">
        <small id="fileHelp" class="form-text text-muted">Select an image for this recipe.</small>
        {{ render_errors(form.recipe_image) }}
      </div>
    </div>

    <div class="form-group row">
      <legend for="recipe_ingredients" class="col-form-legend col-sm-3">Ingredients</legend>
      <div class="col-sm-6">
        <textarea class="form-control" name="recipe_ingredients" id="recipe_ingredients" rows="8"></textarea>
        {{ render_errors(form.recipe_ingredients) }}
      </div>
    </div>

    <div class="form-group row">
      <legend for="recipe_steps" class="col-form-legend col-sm-3">Steps</legend>
      <div class="col-sm-6">
        <textarea class="form-control" name="recipe_steps" id="recipe_steps" rows="8"></textarea>
        {{ render_errors(form.recipe_steps) }}
      </div>
    </div>

    <div class="form-group row">
      <legend for="recipe_inspiration" class="col-form-legend col-sm-3">Inspiration</legend>
      <div class="col-sm-6">
        <input type="text" class="form-control" id="recipe_inspiration" name="recipe_inspiration" placeholder="Enter recipe inspiration...">
        {{ render_errors(form.recipe_inspiration) }}
      </div>
    </div>

    <div class="form-group row">
      <div class="offset-sm-2 col-sm-10">
        <button type="submit" class="btn btn-success">Add Recipe</button>
      </div>
    </div>
  </form>
</div>
</div>

{% endblock %}
